<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户表</title>
<script src="../res/js/jquery-3.4.1.min.js" charset="utf-8" media="all"></script>
<!--<script src="../res/js/sweetalert2.js" charset="utf-8" media="all"></script>-->
<script src="../layui/layui.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css">
<style>
	#select{
		height: 29px;
    	width: 186px;
    	position: absolute;
    		left: 121px;
    		top: 38px;
		z-index: 999999;
	}
	#selectbtn{
		height: 29px;
	    position: absolute;
		    left: 301px;
		    top: 38px;
	    z-index: 999999;
	    font-size: 17px;
	}
</style>
<script type="text/javascript">



	$(function(){
		$("#selectbtn").on("click",function(){
			table2.reload({
				url: '../../UserAction/finAll',
			    where: {
			    	usName: $("#select").val()
			    },
			    page: { curr: 1 }
			});
		})
	})
</script>
</head>
<body>
<div class="layui-input-inline" id="form"></div>
	 <form class="layui-form" action="">
       	<input type="text" name="number" id="select" placeholder="请输入名称" lay-verify="required|number" autocomplete="off" class="layui-input">
     	<button type="button" id="selectbtn" class="layui-btn layui-btn-warm">查询</button>
	 </form>

<table class="layui-hide" id="test" lay-filter="test"></table>
 

<script type="text/javascript" charset="utf-8">
var table2=null;
layui.use('table', function(){
	  var table = layui.table;
	  table2=table.render({
	    elem: '#test'
	    ,url:'../../UserAction/finAll'
	    ,toolbar: '#toolbarDemo'
	    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
	    ,page: true //开启分页
	    ,title: '用户表'
	    ,cols: [[
	    	{type: 'checkbox', fixed: 'left'}
	    	,{field:'usId', title:'用户ID', width:100}
		      ,{field:'usName', title:'用户姓名', width:120}
		      ,{field:'usPass', title:'用户密码', width:120}
		      ,{field:'usPhone', title:'电话号码', width:180, sort: true}
		      ,{field:'usEmail', title:'邮箱账号', width:170}
		      ,{field:'usPhoto', title:'用户照片', width:100, sort: true,templet:'#titleTpl'}
              ,{field:'usType', title:'用户类型', width:100}
		      ,{field:'usRemark', title:'备注', width:100, sort: true}
		      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
	    ]]
	    ,page: true
	  	});
	  
	  table.on('tool(test)', function(obj){
		    var data = obj.data;
		    if(obj.event === 'del'){
		    	layer.confirm('真的删除行么', function(index){

		        	layer.close(index);
		        	var url="../../UserAction/delete";
		        	var dataone={"id":data.usId}; 
		        	$.post(url,dataone,function(obj){
		        		if(obj.state==1){
		        			layer.msg(obj.msg,{
		          				icon:1,
		          				time:1000 //1秒关闭(如果不配置默认三秒)
		          			},function(){
		          				//刷新父页面

                                table2.reload();
		          			});
		        		}else{
		        			layer.msg(obj.msg);	
		        		}
		        	},"json") 
		         });
		    } else if(obj.event === 'edit'){
		        var data1 = obj.data;//获取当前行
		  	  //iframe层
		        layer.open({
		    	  type: 2,
		    	  title: '修改页面',
		    	  shadeClose: true,
		    	  shade: 0.8,
		    	  area: ['60%', '80%'],
		    	  content: '../Pages/addorupdate.html?id='+data.usId, //iframe的url
		    	  end:function(){
		    		  table2.reload();
		    	  }
			   });
		    }
		  });
	  
	  /* 头部工具栏监听 */
	  table.on('toolbar(test)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id)
		    ,data = checkStatus.data; //获取选中的数据
		    switch(obj.event){
		      case 'add':
		    	//iframe层
		     	  layer.open({
		    	  type: 2,
		    	  title: '维护页面',
		    	  shadeClose: true,
		    	  shade: 0.8,
		    	  area: ['60%', '80%'],
		    	  content: '../Pages/addorupdate.html', //iframe的url
		    	  end:function(){
		    		  table2.reload();
		    	  }
		    	});
		      break;
		      case 'update':
		    	  layer.msg('功能还未开通');
		      break;
		      case 'delete':
		    	  if(data.length === 0){
		              layer.msg('请选择一行');
		            } else {
		            	

		    			if(confirm("确定需要删除吗?")){
		    				var ids = "";
		    		          $.each(data,function(index,item){
		    		        	  ids+=item.usId+",";
		    		        	
		    		          })
		    				var url = "../../UserAction/deleteAll";
		    				var data ={ids:ids};
		    				$.post(url,data,function(obj){
		    					if(obj.state==1){
                                    layer.msg("删除成功",{
                                        icon:1,
                                        time:1000 //1秒关闭(如果不配置默认三秒)
                                    },function(){
                                        //刷新父页面

                                        table2.reload();
                                    });
		    					}else{
		    						alert("删除失败!");
		    					}
		    				})
		    			}
		            }
		          break;
		    };
		  }); 
	});
	
	</script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs"  lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="titleTpl">
 	 <img src='../../{{d.usPhoto}}' alt='照片' />
	</script>
	
	<script type="text/html" id="btnDemo">
 		 <i class="layui-icon">&#xe654;</i>  
  		<i class="layui-icon">&#xe640;</i>
	</script>
	
</body>
</html><SCRIPT ></SCRIPT>